<template>
  <header class="header">
    <nav class="nav container sm:flex-row">
      <Router-link to="/" class="logo-link">
        <div class="title">
          <i class="fa-solid fa-sun"></i>
          <p>新中地天气</p>
        </div>
      </Router-link>
      <div class="item" v-if="currentWeatherData.lives[0]">
        <h4 class="text-lg">{{ cityData.city }}</h4>
        <span class="text-sm"
          >实时天气: &nbsp;{{ currentWeatherData.lives[0].weather }}
          {{ currentWeatherData.lives[0].temperature }}℃</span
        >
        <span class="text-sm"
          >{{ currentWeatherData.lives[0].winddirection }}风{{
            currentWeatherData.lives[0].windpower
          }}级</span
        >
      </div>
      <div class="right">
        <i class="fa-solid fa-circle-info" @click="handleClick"></i>

        <i class="fa-solid fa-plus" @click="handleAdd" v-if="showAddIcon"></i>
      </div>
    </nav>
    <div class="bg" ref="bg">
      <div class="bg-message">
        <h2 >关于:</h2>
        <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
        <h2>如何使用:</h2>
        <p class="text-xs mb-4">
          1.点击搜索框输入你希望追踪的城市 <br />
          2.在搜索结果中选中一个城市，你将获取当地最新的天气 <br />
          3.点击右侧的＋号可以将追踪城市的天气情况保存在首页 <br />
        </p>
        <h2>移除城市:</h2>
        <p class="text-xs">
          如果你不想在首页关注某个城市,可以通过底部的按钮删 <br />
          除它
        </p>
        <button class="btn" @click="handleClose">关闭</button>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref,computed ,watch,onMounted} from 'vue'
import { useRoute } from 'vue-router' 
import { getIpData, getCityData, getWeatherData } from '@/api'
const props = defineProps({
  cityData: {
    type: Object,
    required: true,
  },
  currentWeatherData: {
    type: Object,
    required: true,
  },
})
const bg = ref(null)
const route = useRoute()
const selectCity = ref('')
const handleClick = () => {
  bg.value.style.display = 'flex'
}
const handleClose = () => {
  bg.value.style.display = 'none'
}
const showAddIcon = ref(false)
const liData = ref(JSON.parse(localStorage.getItem('savedCities')) || [])
const syncData = () => {
  liData.value = JSON.parse(localStorage.getItem('savedCities') || '[]')
}
const isInCityDetail = computed(() => {
  //判断是否是详情页
  return Boolean(route.params.id); 
});
const isAddIconShow = () => {
  showAddIcon.value = isInCityDetail.value && !isCitySaved.value
}
const isCitySaved = computed(() => {
  //判断是否在CityInfo详情页面
  return liData.value.some(item => item.name === selectCity.value);
});
//添加数据
const handleAdd = async() => {
  const currentCity = selectCity.value
  if (!currentCity) return
  if (isCitySaved.value) return

  const current = JSON.parse(localStorage.getItem('savedCities') || '[]')
  if (current.some(item => item.name === currentCity)) return
  try{
    const res = await getCityData(currentCity);
    const adcodeRes = res.geocodes[0].adcode
    const weatherRes = await getWeatherData(adcodeRes, 'base')
    const temp = weatherRes.lives[0].temperature
    liData.value.push({ name: currentCity,temp: temp,showBtns: false })
    localStorage.setItem('savedCities', JSON.stringify(liData.value))
    isAddIconShow();
  }catch(err){
    console.log('添加失败')
  }
}
onMounted(() => {
  isAddIconShow();
  syncData()
})
watch(
  () => route.path,
  () => {
    syncData()
    
  }
)
watch(
  () => route.query.search, 
  (newCity) => {
    selectCity.value = newCity || '' 
    isAddIconShow();
  },
  { immediate: true } 
)
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  position: sticky;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 10;
  top: 0px;
  .nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 1);
    width: 100%;
    background-color: #00668a;
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    .logo-link {
      color: inherit;
      text-decoration: inherit;
      .title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        .fa-solid {
          font-weight: 900;
          font-family: 'Font Awesome 6 Free';
          font-size: 1.5rem;
          line-height: 2rem;
        }
        p {
          font-size: 1.5rem;
          line-height: 2rem;
        }
      }
    }
    .item {
      display: flex;
      align-items: center;
      gap: 1rem;
      .text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
        font-weight: 330;
      }
      .text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 330;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      gap: 0.75rem;
      flex: 1 1 0%;
      .fa-solid,.fa-plus {
        font-weight: 900;
        font-size: 1.25rem;
        line-height: 1.75rem;
        transition-duration: 1s;
        font-family: 'Font Awesome 6 Free';
        cursor: pointer;
        &:hover {
          color: rgba(0, 78, 113, 1);
        }
      }
      // .fa-plus{
      //   display: none;
      // }
    }
  }
  .bg {
    position: fixed;
    display: none;
    z-index: 20;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    height: 100vh;
    top: 0px;
    left: 0px;
    justify-content: center;
    padding-left: 2rem;
    padding-right: 2rem;
    color: rgb(0, 0, 0, 1);
    .bg-message {
      padding: 1rem;
      background-color: rgba(255, 255, 255, 1);
      align-self: flex-start;
      margin-top: 8rem;
      max-width: 768px;
      h2 {
        font-size: inherit;
        font-weight: inherit;
      }
      .text-us {
        font-size: 0.75rem;
        line-height: 1rem;
      }
      .mb-4 {
        margin-bottom: 1rem;
      }
      .btn {
        color: rgba(255, 255, 255, 1);
        margin-top: 2rem;
        background-color: rgba(0, 102, 138, 1);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 0.75rem;
        line-height: 1rem;
        cursor: pointer;
      }
    }
  }
}
</style>
